<template>
    <div
        style="background-color: rgb(241, 241, 241);padding:5px;padding-right: 7px;min-height: 100vh; box-sizing: border-box;">
        <van-nav-bar title="我的点赞" left-text="返回" left-arrow fixed @click-left="$router.push('/user')">
        </van-nav-bar>
        <div style="height:42px;"></div>

        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

            <div v-for="item in articleList" style="background-color: #fff;
    padding: 10px 16px;margin-top: 10px; border-radius: 10px;display: flex;box-sizing: border-box;"
                @click="$router.push(`/article-detail/${item.article.id}`)">
                <img :src="item.article.picUrl" alt="" style="width: 88px;height: 88px;border-radius: 8px;">
                <div
                    style="margin-left: 15px;display: flex; flex-direction: column;justify-content:space-between;width: 235px;">
                    <div style="margin-top: 5px;">
                        <h6 style="font-weight: bold;color: #333;">{{ item.article.title }}</h6>
                    </div>
                    <p style="color: #666;font-size: 14px;display: flex;justify-content: space-between;margin-bottom: 5px;">
                        <span>{{ item.article.desc }}</span>
                        <span>{{ item.created_at }}</span>
                    </p>
                </div>
            </div>

        </van-list>
    </div>
</template>

<script setup>
    import{ref} from 'vue'
    import {getMyPraise} from '../../api'
    let page=1
    let limit = 10
    let articleList = ref()
    let loading = ref(false)
    let finished = ref(false)
    let count = 0

    let onLoad =()=>{
        getMyPraise({page:page++,limit,type:2}).then(res=>{
            if(res.code==1){
                articleList.value=res.data.list
                count=res.data.count
                loading.value=false
                console.log(res)
                if(page>Math.ceil(count/limit)){
                    finished.value=true
                }
            }
        })
    }
</script>